{% extends 'base.html' %}

{% block title %}Help Center — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<section class="py-5" style="background:linear-gradient(135deg,var(--brand-secondary),var(--brand-primary));color:#fff;">
  <div class="container">
    <h1 class="fw-bold mb-2">Help Center</h1>
    <p class="mb-0 opacity-75 col-lg-7">Find quick answers or send us a message — we’re here to help with courses, certifications, payments, and technical issues.</p>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row g-5">
      <div class="col-lg-5">
        <h2 class="fw-bold h4 mb-3">Common questions</h2>
        <div class="accordion" id="helpFaq">
          <div class="accordion-item border-0 shadow-sm mb-2 rounded-3 overflow-hidden">
            <h3 class="accordion-header">
              <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">How do I enroll in a course?</button>
            </h3>
            <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#helpFaq">
              <div class="accordion-body small text-muted">Create a student account, open a course, and complete enrollment. You’ll be asked for your education background, then pay (if required) to activate access.</div>
            </div>
          </div>
          <div class="accordion-item border-0 shadow-sm mb-2 rounded-3 overflow-hidden">
            <h3 class="accordion-header">
              <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">How do certifications work?</button>
            </h3>
            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#helpFaq">
              <div class="accordion-body small text-muted">Apply for a program, provide your education background, pay the fee, schedule a testing center or remote exam, then sit the proctored MCQ exam.</div>
            </div>
          </div>
          <div class="accordion-item border-0 shadow-sm mb-2 rounded-3 overflow-hidden">
            <h3 class="accordion-header">
              <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">How can I verify a certificate?</button>
            </h3>
            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#helpFaq">
              <div class="accordion-body small text-muted">Use <a href="{% url 'certifications:verify' %}">Verify Certificate</a> and enter the unique code printed on the certificate.</div>
            </div>
          </div>
          <div class="accordion-item border-0 shadow-sm mb-2 rounded-3 overflow-hidden">
            <h3 class="accordion-header">
              <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">I’m logged in — can I open a support ticket?</button>
            </h3>
            <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#helpFaq">
              <div class="accordion-body small text-muted">
                Yes. Logged-in users can also use
                {% if user.is_authenticated %}
                  <a href="{% url 'support:ticket_create' %}">Support Tickets</a>
                {% else %}
                  Support Tickets after login
                {% endif %}
                for ongoing issues.
              </div>
            </div>
          </div>
        </div>
        {% if user.is_authenticated %}
        <a href="{% url 'support:ticket_list' %}" class="btn btn-outline-primary btn-sm mt-3">
          <i class="bi bi-life-preserver me-1"></i>My support tickets
        </a>
        {% endif %}
      </div>

      <div class="col-lg-7">
        <div class="card border-0 shadow-sm rounded-4">
          <div class="card-body p-4 p-md-5">
            <h2 class="fw-bold h4 mb-1">Contact us</h2>
            <p class="text-muted small mb-4">Send a message and our team will get back to you by email.</p>
            <form method="post" novalidate>
              {% csrf_token %}
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label fw-semibold small">Name <span class="text-danger">*</span></label>
                  {{ form.name }}
                  {% if form.name.errors %}<div class="text-danger small">{{ form.name.errors.0 }}</div>{% endif %}
                </div>
                <div class="col-md-6">
                  <label class="form-label fw-semibold small">Email <span class="text-danger">*</span></label>
                  {{ form.email }}
                  {% if form.email.errors %}<div class="text-danger small">{{ form.email.errors.0 }}</div>{% endif %}
                </div>
                <div class="col-md-6">
                  <label class="form-label fw-semibold small">Phone</label>
                  {{ form.phone }}
                </div>
                <div class="col-md-6">
                  <label class="form-label fw-semibold small">Topic</label>
                  {{ form.topic }}
                </div>
                <div class="col-12">
                  <label class="form-label fw-semibold small">Subject <span class="text-danger">*</span></label>
                  {{ form.subject }}
                  {% if form.subject.errors %}<div class="text-danger small">{{ form.subject.errors.0 }}</div>{% endif %}
                </div>
                <div class="col-12">
                  <label class="form-label fw-semibold small">Message <span class="text-danger">*</span></label>
                  {{ form.message }}
                  {% if form.message.errors %}<div class="text-danger small">{{ form.message.errors.0 }}</div>{% endif %}
                </div>
              </div>
              <button type="submit" class="btn btn-primary fw-semibold mt-4">
                <i class="bi bi-send me-1"></i>Send message
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}